<template>
  <a-modal
    title="添加業主"
    :width="600"
    class="model-yz"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item v-show="false"><a-input  v-decorator="['id']" /></a-form-item>
        <a-form-item
              label="收租周期"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol">
              <a-input-group compact>
                <a-form-item
                    label=""
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol">
                  <a-select style="width: 150px" v-decorator="['receiptFu', { initialValue: 1, rules: [{ required: true, message: '请选择付款方式！' }]}]">
                    <a-select-option v-for="(item,index) in 18" :key="index" :value="item">付{{ item }}</a-select-option>
                  </a-select>
                </a-form-item>
                 <a-form-item
                    label=""
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol">
                  <a-select style="width: 150px" v-decorator="['receiptYj', { initialValue: 3, rules: [{ required: true, message: '请选择付款周期！' }]}]">
                    <a-select-option :value="1">日</a-select-option>
                    <a-select-option :value="2">月</a-select-option>
                    <a-select-option :value="3">年</a-select-option>
                  </a-select>
                </a-form-item>
              </a-input-group>
              <p>修改交租周期将修改【账单计划】：重置未到账账单的租金递增、免租期、账单周期</p>
        </a-form-item>
        <a-form-item
        label="提前几日"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
          <a-input-number
                        :min="0"
                        :max="365"
                        style="width:100%"
                        placeholder="请输入账单收租日提前几日"
                        v-decorator="['billEndTqData', { initialValue: 0 }]"/>
                        相较账单起始日提前几天交租
        </a-form-item>
        <a-row>
        <a-table
              size="middle"
              :columns="columns"
              :dataSource="lszc"
              :pagination="false"
              :rowKey="(record) => record.rentAmountCategory"
              :loading="memberLoading">
          <template slot="amount" slot-scope="text, record">
                              <a-input-number
                                  style="width:100%"
                                  :precision="2"
                                  :min="0"
                                  :value="text"
                                  :max="99999999"
                                  @change="e => handlelszcChange(e,record.rentAmountCategory, 'amount')"
                                  :step="10"/>
                            </template>
                            <template slot="operation" slot-scope="text, record">
                              <a @click="lszcClick(record.rentAmountCategory)">删除</a>
                            </template>
          </a-table>
        </a-row>
        <a-button type="primary"  @click="lszcAddClick(2)" icon="plus" size="small" class="add_my">
          添加
        </a-button>
      </a-form>
    </a-spin>
    <bill-lszc-select ref="billLszcSelect" @ok="handleLszcOk"/>
  </a-modal>
</template>

<script>
  import { ownerLeaseEditZyZqFy } from '@/api/modular/main/ownerlease/ownerLeaseManage'
  import billLszcSelect from '../housebill/billLszcSelect.vue'
  export default {
     components: {
       billLszcSelect
    },
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        },
        visible: false,
        confirmLoading: false,
        memberLoading: false,
        form: this.$form.createForm(this),
        columns: [
          {
            title: '名稱',
            dataIndex: 'rentAmountName',
            width: '30%',
            scopedSlots: { customRender: 'rentAmountName' }
          },
          {
            title: '金額',
            dataIndex: 'amount',
            width: '30%',
            scopedSlots: { customRender: 'amount' }
          },
          {
            title: '操作',
            key: 'action',
            scopedSlots: { customRender: 'operation' }
          }
        ],
        lszc: []
      }
    },
    methods: {
      // 初始化方法
      edit (record) {
        this.visible = true
        this.lszc = record.gdfyList
        setTimeout(() => {
          this.form.setFieldsValue(
            {
              id: record.id,
              receiptFu: record.receiptFu,
              receiptYj: record.receiptYj,
              billEndTqData: record.billEndTqData
            }
          )
        }, 100)
      },
      handlelszcChange (value, key, column) {
        const newData = [...this.lszc]
        const target = newData.find(item => key === item.rentAmountCategory)
        if (target) {
          target[column] = value
          this.lszc = newData
        }
      },
      /**
       * 删除
       */
      lszcClick(key) {
        const newData = this.lszc.filter(item => item.rentAmountCategory !== key)
        this.lszc = newData
      },
      lszcAddClick(type) {
        this.$refs.billLszcSelect.select(this.lszc, 2)
      },
      handleLszcOk(values, type) {
        if (type === 2) {
          if (values.length > 0) {
            const chllenLen = values.length
            for (var iv = 0; iv < chllenLen; iv++) {
              const target = this.lszc.find(item => values[iv].rentAmountCategory === item.rentAmountCategory)
              if (!target) {
                this.lszc.push(values[iv])
              }
            }
          }
        }
      },
      /**
       * 提交表单
       */
      handleSubmit () {
        const { form: { validateFields } } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          if (!errors) {
            for (const key in values) {
              if (typeof (values[key]) === 'object') {
                values[key] = JSON.stringify(values[key])
              }
            }
            values.gdfy = this.lszc
            ownerLeaseEditZyZqFy(values).then((res) => {
              if (res.code === 200) {
                this.$message.success('修改成功')
                this.confirmLoading = false
                this.$emit('ok', '')
                this.handleCancel()
              } else {
                this.$message.error(res.msg)// + res.message
              }
            }).finally((res) => {
              this.confirmLoading = false
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false
        this.lszc = []
      }
    }
  }
</script>
<style lang="less" scoped >
/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
.parImg{
  position: relative;
}
.parImg_icon{
  position: absolute;
  top: 0;
  right: 0;
  color: rgba(255, 0, 0, 0.829);
}
.mocheck{
  background-color: rgba(58, 136, 180, 0.822);
  color: aliceblue;
}
</style>
